<template>
	<div class="movieDetail">
		<detail-head v-if="detail" :detail="detail" :styleObj="styleObj"></detail-head>
		<div class="movieDesc">
			<p :class="contentHeight">{{detail.content}}</p>
			<i @click="showAll" 
			class="iconfont icon-icon--" 
			:class="contentHeight?'icon-icon--':'icon-shang'"></i>
		</div>
	</div>
</template>

<script>
	import detailHead from './components/detailHead.vue';
	export default {
		name: "movieDetail",
		components: {
			detailHead
		},
		data(){
			return{
				detail: "",
				styleObj: {
					backgroundImage: ""
				},
				contentHeight: "contentHeight"
			}
		},
		methods: {
			showAll(){
				if(this.contentHeight == ""){
					this.contentHeight = "contentHeight";
				}else{
					this.contentHeight = "";
				}
			}
		},
		created(){
			this.$http.get("/api/movieDetail",{
				params: {
					id: this.$route.params.id
				}
			}).then(res=>{
				console.log(res)
				this.detail = res.data.data;
				this.styleObj.backgroundImage = `url(${this.detail.image})`;
			})
		},
		computed: {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';
	.movieDetail{
		.movieDesc{
			font-size: vw(16);
			color: #999;
			margin: vw(20);
			padding: vw(12) 0;
			text-align: center;
			border-top: 15px solid #eee;
			border-bottom: 15px solid #eee;
			p{
				text-align: left;
			}
			.contentHeight{
				height: vw(40);
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-bottom: vw(10);
			}
			i{
				font-size: vw(20);
				color: #999;
			}
		}
	}
</style>
